<template>
  <div class="operation operationContent">
    <div class="operation-top">
      <el-form
        :model="operation"
        label-width="70px"
        ref="operation"
        label-position="left"
        class="demo-operation"
      >
        <el-form-item label="业务名称">
          <el-input v-model="operation.name" size="small"></el-input>
        </el-form-item>
        <el-form-item class="search">
          <el-button size="small" type="primary" @click="search">搜索</el-button>
          <el-button size="small" type="info" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="operation-bottom">
      <div class="add">
        <!-- <el-button type="primary" icon="el-icon-plus" @click="addyewu"
               >新增业务</el-button
        >-->
      </div>
      <div class="operation-b-table">
        <el-table :data="tableData" style="width: 100%" border @selection-change="tableDataChange">
          <el-table-column align="center" width="100px" type="index" label="序号"></el-table-column>
          <el-table-column align="center" prop="id" label="业务编码"></el-table-column>
          <el-table-column align="center" prop="name" label="业务名称"></el-table-column>
          <el-table-column align="center" label="业务管理" width="210">
            <template slot-scope="scope">
              <div class="operations">
                <el-link
                  type="primary"
                  @click="notice(scope.$index, scope.row)"
                  icon="el-icon-tickets"
                >申请须知</el-link>
                <el-link
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row, false , 3)"
                  icon="el-icon-edit"
                >编辑</el-link>
                <!-- <el-link
                  type="primary"
                  @click="handleDelete(scope.$index, scope.row, true)"
                  icon="el-icon-delete"
                >删除</el-link>-->
              </div>
              <!-- <el-button type="warning" @click="notice(scope.$index, scope.row)">申请须知</el-button>
              <el-button type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增业务对话框 -->
    <el-dialog title="新增业务" :visible.sync="newyewu.business" width="40%">
      <el-form :model="newyewu.form" ref="newyewu.newdata" label-width="180px" class="demo-newyewu">
        <el-form-item label="业务名称">
          <el-input v-model="newyewu.form.name" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="点击上传申请须知图片：" required>
          <el-button type="primary" @click="newyewu.explain = true">选择图片</el-button>
          <span class="text-tag">按照图片先后顺序添加</span>
          <div class="img-box">
            <el-image
              v-for="(item, index) in newyewu.explainimg"
              :key="index"
              style="width: 200px; height: 200px;margin-top: 5px; "
              :src="item.url"
              fit="cover"
              :preview-src-list="RxplainPreList"
            ></el-image>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newyewu.business = false">取 消</el-button>
        <el-button type="primary" @click="addoperation">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 选择图片 -->
    <el-dialog title="提示" :visible.sync="newyewu.explain" center :destroy-on-close="true">
      <span>需要注意的是内容是默认不居中的</span>
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :file-list="newyewu.explainimg"
        :on-change="changeRxplain"
        :limit="10"
        :on-exceed="exceesLimitRxplain"
        multiple
        drap
      >
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="removeRxplain(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newyewu.explain = false">取 消</el-button>
        <el-button type="primary" @click="newyewu.explain = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看编辑 -->
    <!-- 查看编辑对话框 -->
    <el-dialog title="新增业务" :visible.sync="examine.business" width="40%">
      <el-form
        :rules="newdataName"
        :model="examine.form"
        ref="examineNewdata"
        label-width="180px"
        class="demo-examine"
      >
        <el-form-item prop="name" label="业务名称">
          <el-input style="width:260px" v-model.trim="examine.form.name" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="点击上传申请须知图片：" required>
          <el-button type="primary" @click="examine.explain = true">选择图片</el-button>
          <span class="text-tag">按照图片先后顺序添加</span>
          <div class="img-box">
            <el-image
              v-for="(item, index) in examine.explainimg"
              :key="index"
              style="width: 200px; height: 200px;margin-top: 5px; "
              :src="item.url"
              fit="cover"
              :preview-src-list="RxplainPreListtwo"
            ></el-image>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="examine.business = false">取 消</el-button>
        <el-button type="primary" @click="compile">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 选择图片 -->
    <el-dialog title="提示" :visible.sync="examine.explain" center :destroy-on-close="true">
      <span class="el-upload__tip1">需要注意的是内容是默认不居中的</span>
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :file-list="examine.explainimg"
        :on-change="changeRxplaintwo"
        :limit="10"
        :on-exceed="exceesLimitRxplaintwo"
        multiple
        drap
      >
        <div slot="tip" class="el-upload__tip el-upload__tip2">只能上传jpg/png文件，且不超过500kb</div>
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="removeRxplaintwo(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="examine.explain = false">取 消</el-button>
        <el-button type="primary" @click="examine.explain = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 申请须知 -->
    <el-dialog title="申请须知" :visible.sync="imgxuzhi" width="60%" class="xz">
      <div class="xz-img" v-for="item in applicants" :key="item">
        <img :src="item" alt />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="imgxuzhi = false">取 消</el-button>
        <el-button type="primary" @click="imgxuzhi = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagelength"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newdataName: {
        name: [{ required: true, message: "请输入业务名称", trigger: "blur" }],
      },
      //分页
      //第几页
      pageSize: 10,
      pageNum: 1,
      pagelength: 0,
      //搜索数据
      operation: {
        name: "",
        isActivate: true,
      },
      //假数据
      tableData: [],
      //新增业务
      newyewu: {
        business: false,
        form: {
          id: "",
          imgfile: [],
          name: "",
        },
        // 删除图片按钮
        disabled: false,
        // 说明文件对话框
        explain: false,
        // 说明文件图片
        explainimg: [],
      },
      //查看编辑
      examine: {
        business: false,
        form: {
          id: "",
          imgfile: [],
          name: "",
        },
        // 删除图片按钮
        disabled: false,
        // 说明文件对话框
        explain: false,
        // 说明文件图片
        explainimg: [],
      },
      imgxuzhi: false,
      applicants: [],
    };
  },
  methods: {
    //新增业务
    addyewu() {
      this.newyewu.business = true;
      this.newyewu.explainimg = [];
      this.newyewu.form.imgfile = [];
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      if (this.operation.isActivate) {
        this.paging();
      } else {
        this.apisearch();
      }
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.operation.isActivate) {
        this.paging();
      } else {
        this.apisearch();
      }
    },
    // 新增图片上传
    changeRxplain(file, fileList) {
      this.newyewu.form.imgfile.push(file.raw);
      this.newyewu.explainimg.push({
        name: file.name,
        url: file.url,
        id: file.uid,
      });
    },
    //  新增图片删除
    removeRxplain(file) {
      const index = this.newyewu.explainimg.findIndex(
        (el) => el.uid === file.uid
      );

      index !== -1 && this.newyewu.explainimg.splice(index, 1);
    },
    //  新增图片图片数量超出限制
    exceesLimitRxplain() {
      this.$message({
        type: "warning",
        message: "图片数量超出限制",
      });
    },
    // 编辑查看上传
    changeRxplaintwo(file, fileList) {
      this.examine.form.imgfile.push(file.raw);
      this.examine.explainimg.push({
        name: file.name,
        url: file.url,
        id: file.uid,
      });
    },
    //  编辑查看删除
    removeRxplaintwo(file) {
      const index = this.examine.explainimg.findIndex(
        (el) => el.uid === file.uid
      );
      index !== -1 && this.examine.explainimg.splice(index, 1);
    },
    //  编辑查看图片数量超出限制
    exceesLimitRxplaintwo() {
      this.$message({
        type: "warning",
        message: "图片数量超出限制",
      });
    },
    //搜索
    search() {
      this.operation.isActivate = false;
      this.apisearch();
    },
    //重置
    resetForm() {
      this.operation.isActivate = true;
      this.operation.name = "";
      // this.paging();
    },
    //新增业务
    addoperation() {
      this.newyewu.business = false;
      var formdata = new FormData();
      let config = {
        header: {
          "Content-Type": "multipart/form-data",
        },
      };
      this.newyewu.form.imgfile.forEach((item) => {
        formdata.append("file", item);
      });
      formdata.append("id", this.newyewu.form.id);
      formdata.append("name", this.newyewu.form.name);
      this.$http.post("trademark/class/add", formdata, config).then((res) => {
        this.paging();
        if (res.status !== 200) {
          return this.$message.error("获取数据失败");
        }
      });
    },
    //申请须知
    notice(index, row) {
      this.applicants = [];
      this.imgxuzhi = true;
      this.$http
        .get("trademark/class/findImgById", {
          params: {
            id: row.id,
          },
        })
        .then((res) => {
          console.log(res, 111111111111111111111111);
          let http = res.config.baseURL;
          let list = res.data.data.split(",");
          console.log(list);

          list.forEach((item) => {
            this.applicants.push(res.config.baseURL + "/trademark" + item);
          });
          console.log(this.applicants);
          // this.applicants =
          //   "http://192.168.0.124:60000/trademark" + res.data.data;
          if (res.status !== 200) {
            return this.$message.error("获取数据失败");
          }
        });
    },
    //编辑
    handleEdit(index, row) {
      this.examine.explainimg = [];
      this.examine.form.imgfile = [];
      this.examine.business = true;
      this.examine.form.name = row.name;
      this.examine.form.id = row.id;
    },
    compile() {
      this.$refs.examineNewdata.validate((valid) => {
        if (valid) {
          this.examine.business = false;
          var formdata = new FormData();
          let config = {
            header: {
              "Content-Type": "multipart/form-data",
            },
          };
          this.examine.form.imgfile.forEach((item) => {
            formdata.append("file", item);
          });
          formdata.append("id", this.examine.form.id);
          formdata.append("name", this.examine.form.name);
          this.$http
            .post("trademark/class/update", formdata, config)
            .then((res) => {
              this.paging();
              if (res.status !== 200) {
                return this.$message.error("获取数据失败");
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$http
            .get("trademark/class/delete", {
              params: {
                id: row.id,
              },
            })
            .then((res) => {
              this.paging();
              if (res.status !== 200) {
                return this.$message.error("获取数据失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //选中
    tableDataChange(val) {},
    //请求接口
    //分页请求
    paging() {
      this.$http
        .get("trademark/class/findByName", {
          params: {
            name: this.operation.name,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          this.tableData = res.data.data.list;
          this.pagelength = res.data.data.total;
          if (res.status !== 200) {
            return this.$message.error("获取数据失败");
          }
        });
    },
    //搜索接口
    apisearch() {
      this.$http
        .get("trademark/class/findByName", {
          params: {
            name: this.operation.name.trim(),
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          if (res.data.code !== 200) {
            this.tableData = [];
            return this.$message.error("获取数据失败");
          }
          this.tableData = res.data.data.list;
          this.pagelength = res.data.data.total;
        });
    },
  },
  computed: {
    //  新增图片预览数组
    RxplainPreList() {
      return this.newyewu.explainimg.map((el) => {
        return el.url;
      });
    },
    //  编辑查看预览数组
    RxplainPreListtwo() {
      return this.examine.explainimg.map((el) => {
        return el.url;
      });
    },
  },
  //请求接口
  mounted() {
    this.paging();
  },
};
</script>

<style lang="less" scoped>
.operation .operation-top {
  width: 100%;
  display: flex;
  .demo-operation {
    display: flex;
    .el-form-item {
      margin: 0 !important;
      .el-button + .el-button {
        margin-left: 15px;
      }
    }
  }
}
.operation .operation-bottom {
  .operation-b-table {
    margin-top: 20px;
    /deep/.el-table td,
    /deep/.el-table th {
      text-align: center;
    }
  }
}
.operation {
  .xz {
    .xz-img {
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
  .operation .text-tag {
    margin-left: 10px;
    color: #f00;
    font-size: 12px;
  }
  .operation .block {
    margin-top: 30px;
    /deep/.el-pager .number {
      background: #fff;
      border: 1px solid #dcdfe6;
      margin: 0 5px;
      border-radius: 2px;
      &.active {
        background-color: #409eff;
        color: #fff;
        border: 1px solid #409eff;
      }
    }
  }
}
.operation .el-upload__tip1 {
  display: block;
  padding-bottom: 15px;
}
.operation .el-upload__tip2 {
  padding-top: 10px;
  // display: block;
  // line-height: 50px;
}
.operation .operations {
  display: flex;
  justify-content: space-around;
}
.operation .el-link {
  font-size: 12px;
}
</style>
